<template>
  <el-container>
    <el-aside style="width:450px">
      <el-table
        class="studentTable"
        :data="submitData"
        height="100%"
        border
        :header-cell-style="{
          background: '#5988B3',
          color: '#F2F2F2',
          padding: '0',
          height: '30px',
          fontSize: '12px',
          textAlign: 'center',
          fontWeight: '700',
        }"
        :highlight-current-row="true"
        :cell-style="{
          padding: '0px',
          textAlign: 'center',
          fontSize: '12px',
          height: '30px',
          color: '#333333',
        }"
        :row-style="{ height: '25px', padding: '0px' }"
        ref="multipleTable"
      >
        <el-table-column
          prop="studentId"
          label="学号"
          :resizable="false"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          :resizable="false"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="isCheck"
          label="提交情况"
          :resizable="false"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="score"
          label="分数"
          :resizable="false"
        ></el-table-column>
        <!-- <el-table-column label="操作" :resizable="false">
          <template slot-scope="scope">
            <el-button type="text" @click="correcting(scope.row)" class="tableBtn">批改</el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </el-aside>
    <el-main style="padding:0;">
      <el-container>
        <el-header height="200px" style="padding:10px 20px">
          <el-form label-width="110px" style="margin-top:5px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="课程作业名称" style="margin-left:30px">
                  <el-input
                    size="small"
                    v-model="homeworkData.homeworkTitle"
                    :readonly="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="截止日期"
                  style="margin-left:40px"
                  label-width="80px"
                >
                  <el-input
                    size="small"
                    v-model="homeworkData.deadline"
                    :readonly="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label="作业要求"
                  style="margin-left:30px;margin-top:10px"
                >
                  <el-input
                    type="textarea"
                    size="small"
                    v-model="homeworkData.homeworkContent"
                    :readonly="true"
                    class="input"
                    resize="none"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="相关附件" style="margin-left:30px;">
                  <a
                    v-for="(item, index) in homeworkData.homeworkAttachmentList"
                    :key="index"
                    :href="item.link"
                    style="margin-right:10px"
                    >{{ item.attachmentTitle }}</a
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-header>
        <el-divider></el-divider>
        <el-main style="width:100%;height:100%; padding:10px 20px">
          <el-form>
            <el-form-item
              label="分数段学生分布"
              style="margin-left:30px;margin-top:10px"
            >
              <div id="main1" style="float:left;width:100%;height: 300px"></div>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
      <a
        style="margin-top:17px;float:right;font-size:17px; color: rgb(12, 76, 142); margin-right:20px"
        @click="back"
        >返回上一级</a
      >
    </el-main>
  </el-container>
</template>

<script>
import echarts from "echarts";

export default {
  data() {
    return {
      dataForChar: { a: 1, b: 3, c: 0, d: 0, uncounted: 1 },
      // 学生交作业情况
      submitData: [
        // {
        //   studentId: "201830670001",
        //   name: "陈一鸣",
        //   isCheck: "已批改",
        //   score: 95,
        // },
        // {
        //   studentId: "2018306700012",
        //   name: "陈一鸣",
        //   isCheck: "已批改",
        //   score: 98,
        // },
      ],
      // 当前查看学生
      currentStudent: {
        studentId: "",
        name: "",
        isCheck: "",
        score: "",
      },
      // 作业情况
      homeworkData: {
        // homeworkTitle: "第1章作业",
        // deadline: "2020/9/30",
        // homeworkContent: "完成习题1、2",
        // homeworkAttachmentList: [
        //   {
        //     attachmentTitle: "座位表.xlsx",
        //     link:
        //       "https://mybucket-1304114494.cos.ap-guangzhou.myqcloud.com/%E5%BA%A7%E4%BD%8D%E8%A1%A8.xlsx",
        //   },
        // ],
      },
    };
  },
  methods: {
    //返回单项作业详细信息
    returnSubmitData() {
      let options = { homeworkId: parseInt(this.$route.query.homeworkId) };
      var _this = this;
      this.$http
        .post(this.$api.HomeworkqueryHomeworkCondition, options)
        .then((resp) => {
          if (resp.success) {
            this.submitData = resp.data;

            // 设置默认选中第一行
            if (this.submitData[0]) {
              this.$refs.multipleTable.setCurrentRow(this.submitData[0], true);
              this.correcting(this.submitData[0]);
            }
          } else {
            this.$handleFailResp(this, resp);
          }
        });
    },
    // 点击批改作业按钮
    correcting(item) {
      let options = {
        homeworkId: parseInt(this.$route.query.homeworkId),
        studentId: item.studentId,
      };
      // 返回作业内容以及学生提交的作业
      this.$http
        .post(this.$api.HomeworkqueryWorkConditionOfS, options)
        .then((resp) => {
          if (resp.success) {
            this.homeworkData = resp.data;
          } else {
            this.$handleFailResp(this, resp);
          }
        });

      // 点击后更新currentStudent内容
      this.currentStudent.studentId = item.studentId;
      this.currentStudent.name = item.name;
      this.currentStudent.isCheck = item.isCheck;
      this.currentStudent.score = item.score;
    },

    //初始化数据
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main1"));

      let options = { homeworkId: parseInt(this.$route.query.homeworkId) };
      this.$http.post(this.$api.Homeworkstatistics, options).then((resp) => {
        if (resp.success) {
          console.log("饼图后端返回数据")
          console.log(resp)
          var dataForChar = resp.data;
          var a,b,c,d,uncounted ='';
          a = dataForChar.a == 0 ? '':dataForChar.a;
          b = dataForChar.b == 0 ? '':dataForChar.b;
          c = dataForChar.c == 0 ? '':dataForChar.c;
          d = dataForChar.d == 0 ? '':dataForChar.d;
          uncounted = dataForChar.uncounted == 0 ? '':dataForChar.uncounted;

          // 绘制图表
          myChart.setOption({
            // title: {
            //   text: "某站点用户访问来源", //主标题
            //   subtext: "纯属虚构", //副标题
            //   x: "center" //x轴方向对齐方式
            // },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
              orient: "vertical",
              x:'right',
              y:'center',
              data: ["90分以上", "80~89分", "60~79分", "60分以下", "无分数"],
            },
            series: [
              {
                name: "作业情况",
                type: "pie",
                radius: "55%",
                center: ["50%", "60%"],
                data: [
                  { value: a, name: "90分以上" },
                  { value: b, name: "80~89分" },
                  { value: c, name: "60~79分" },
                  { value: d, name: "60分以下" },
                  { value: uncounted, name: "无分数" },
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    back() {
      this.$router.push("/teacher/courseMangement/homeworkHome");
    },
  },
  mounted() {
    this.returnSubmitData();

    // 渲染数据
    this.initData();
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-input--small .el-input__inner {
  border-radius: 0;
  border: 1px solid #333333;
  color: #333333;
  height: 27px;
  font-size: 13px;
  width: 200px;
  font-family: "微软雅黑";
}

/deep/ .el-form-item__label {
  font-size: 14px;
  color: #333333;
  text-align: left;
}

.el-col-12 {
  height: 50px;
}

.el-divider {
  height: 2px;
  width: 90%;
  margin: auto;
}

/deep/ .el-textarea__inner {
  border-radius: 0;
  height: 50px;
  font-size: 13px;
  width: 450px;
  color: #333333;
  border: 1px solid #333333;
  font-family: "微软雅黑";
}
</style>
